<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品列表</title>
    <link rel="stylesheet" href="/zoff/css/reset.css">
    <link rel="stylesheet" href="/zoff/css/common.css">
    <link rel="stylesheet" href="/zoff/css/shoplist.css">
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        @include('header')

        <div class="m-wrap">
            <div class="m-content">
                <div class="shoplist-bg">
                    <img src="/zoff/image/shoplist/bg.png">
                </div>
                <div class="select-list">
                    <div class="single-select" id="series">
                        <ul>
                            <li><i>系&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;列：</i></li>
                            <li><span class="active">全部商品</span></li>
                            <li><span>Zoff SMART</span></li>
                            <li><span>METAL</span></li>
                            <li><span>CLASS</span></li>
                            <li><span>太阳镜</span></li>
                            <li><span>合作款</span></li>
                            <li><span>PC套装</span></li>
                            <li><span>镜片</span></li>
                        </ul>
                    </div>
                    <div class="single-select" id="style">
                        <ul>
                            <li><i>风&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格： </i></li>
                            <li><span>休闲</span></li>
                            <li><span>商务</span></li>
                            <li><span>运动</span></li>
                            <li><span>复古</span></li>
                            <li><span>儿童款</span></li>
                        </ul>
                    </div>
                    <div class="single-select" id="frame">
                        <ul>
                            <li><i>框&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;形：</i></li>
                            <li><span>方形</span></li>
                            <li><span>椭圆形</span></li>
                            <li><span>威灵顿</span></li>
                            <li><span>波士顿</span></li>
                            <li><span>圆形</span></li>
                            <li><span>其它</span></li>
                        </ul>
                    </div>
                    <div class="single-select" id="material">
                        <ul>
                            <li><i>前框材质：</i></li>
                            <li><span>ULTEM(记忆塑料)</span></li>
                            <li><span>金属</span></li>
                            <li><span>板材</span></li>
                            <li><span>TR-90</span></li>
                            <li><span>钛</span></li>
                            <li><span>其它</span></li>
                        </ul>
                    </div>
                    <div class="single-select" id="price">
                        <ul>
                            <li><i>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：</i></li>
                            <li><span>280元</span></li>
                            <li><span>380元</span></li>
                            <li><span>580元</span></li>
                            <li><span>TR-90</span></li>
                            <li><span>780元</span></li>
                            <li><span>980元</span></li>
                            <li><span>其它</span></li>
                        </ul>
                    </div>
                </div>
                <div class="goods-wrap">
                    <div class="op-r">
                        <div class="time-select">
                            <select>
                                <option value="">上架时间</option>
                                <option value="">三个月</option>
                                <option value="">半年</option>
                                <option value="">一年</option>
                            </select>

                        </div>
                        <div class="price-select">
                            <select>
                                <option value="">价格</option>
                                <option value="">280</option>
                                <option value="">380</option>
                                <option value="">580</option>
                                <option value="">780</option>
                                <option value="">980</option>
                            </select>
                        </div>
                    </div>
                    <div class="goods-list">
                        <div class="single-goods">
                            <a href="#">
                                <div><img src="/zoff/image/shoplist/s-1.png"></div>
                                <div class="goods-info">
                                    <div>SMART</div>
                                    <div>780<span>RMB</span></div>
                                    <div>ZJ61042</div>
                                </div>
                            </a>
                        </div>
                        <div class="single-goods">
                            <a href="#">
                                <div><img src="/zoff/image/shoplist/s-1.png"></div>
                                <div class="goods-info">
                                    <div>SMART</div>
                                    <div>780<span>RMB</span></div>
                                    <div>ZJ61042</div>
                                </div>
                            </a>
                        </div>
                        <div class="single-goods">
                            <a href="#">
                                <div><img src="/zoff/image/shoplist/s-1.png"></div>
                                <div class="goods-info">
                                    <div>SMART</div>
                                    <div>780<span>RMB</span></div>
                                    <div>ZJ61042</div>
                                </div>
                            </a>
                        </div>
                        <div class="single-goods">
                            <a href="#">
                                <div><img src="/zoff/image/shoplist/s-1.png"></div>
                                <div class="goods-info">
                                    <div>SMART</div>
                                    <div>780<span>RMB</span></div>
                                    <div>ZJ61042</div>
                                </div>
                            </a>
                        </div>
                        <div class="single-goods">
                            <a href="#">
                                <div><img src="/zoff/image/shoplist/s-1.png"></div>
                                <div class="goods-info">
                                    <div>SMART</div>
                                    <div>780<span>RMB</span></div>
                                    <div>ZJ61042</div>
                                </div>
                            </a>
                        </div>
                        <div class="single-goods">
                            <a href="#">
                                <div><img src="/zoff/image/shoplist/s-1.png"></div>
                                <div class="goods-info">
                                    <div>SMART</div>
                                    <div>780<span>RMB</span></div>
                                    <div>ZJ61042</div>
                                </div>
                            </a>
                        </div>

                    </div>
                    <div class="page">
                            <div>
                                <a href="#" class="page-active">1</a>
                                <a href="#">2</a>
                                <a href="#">3</a>
                                <a href="#">4</a>
                                <a href="#">下一页></a>
                                <a href="#">最后一页>></a>
                                <input type="text" maxlength=5 id="page">
                                <a href="javascript:void(0)" id="jump">跳转</a>
                            </div>
                        </div>
                </div>

            </div>
        </div>

        @include('footer')

    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var data = {
                series: '全部商品',//系列 默认是全部商品
                style: "",//风格
                frame: "",//框型
                material: "",//前框材质
                price: ""//价格
            }
            $("div.single-select li span").on("click", function () {
                $(this).parents("div.single-select").find("span.active").removeClass("active");
                data[$(this).parents("div.single-select").attr("id")] = $(this).html();
                $(this).addClass("active");
                console.log(data)
                // ajxa
                // $.ajax()

            })
        })
    </script>
</body>

</html>
